<template>
    <div class="personal">
        <h1>在线教育管理系统</h1>
        <div class="div">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name" style="color:white">
                <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input show-password v-model="ruleForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确定密码" prop="checkPass">
                <el-input show-password v-model="ruleForm.checkPass" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="identity">
                <el-select v-model="ruleForm.identity" placeholder="请选择身份">
                <el-option label="管理员" value="管理员"></el-option>
                <el-option label="皮卡丘" value="皮卡丘"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="add()">注册</el-button>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkPass !== '') {
              this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
            ruleForm: {
                name:'',
                password:'',
                email:'',
                identity: '',
                checkPass:''
            },
            rules:{
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { validator: validatePass2, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: "email", message: '请输入正确邮箱格式', trigger: 'blur' },
                ],
                identity: [
                    { required: true, message: '请选择身份', trigger: 'blur' },
                ],
            },
        };
       
    },
    methods: {
       add(){
           this.$http({url:'/api/users/register',method:'POST',data:this.ruleForm}).then(res=>{
            console.log(res)
            if(res.status==200){
                this.$message({
                    message:'注册成功',
                    type:'success'
                })
                this.$router.push('/')
            }
           }).catch(error=>{
            this.$message({
                    message:error.response.msg,
                    type:'error'
                })
           })
        }
    },
};
</script>

<style lang="scss" >
.personal {
    width: 100vw;
    height: 100vh;
    background-color: #2d3a4b;
    margin: auto;
    color: white;
    .div{
        
        width: 40%;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%,-50%);
        .el-button{
            width: 100%;
        }
        .el-form-item__label {
            color: white;
        }
    }
}

</style>